<template>
  <div class="box">
    <el-card>
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        label-width="100px"
        style="justify-content:space-between"
      >
        <span>
          <el-form-item label="关键字" class="guanjian">
            <el-input
              size="small"
              v-model="form.keyword"
              placeholder="根据文章列表搜索"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态" class="state">
            <el-select size="small" v-model="form.state" placeholder="请选择">
              <el-option label="启用" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-button @click="onSubmit" class="button-btn">清除</el-button>
          <el-button type="primary" @click="onSubmit_sou" class="button-btn"
            >搜索</el-button
          >
        </span>
        <el-form-item>
          <el-button type="success" class="button" @click="btnNew">
            <i class="el-icon-edit"></i>新增技巧</el-button
          >
        </el-form-item>
      </el-form>
      <p class="statistical"><i class="el-icon-info"></i>数据共11条</p>

      <el-table :data="tableData" border style="width: 100%">
        <el-table-column
          type="index"
          width="100"
          label="序号"
        ></el-table-column>
        <el-table-column label="文章标题">
          <template v-slot="{ row }">
            <div>
              {{ row.title }}&nbsp;<i
                class="el-icon-film"
                v-if="row.videoURL"
                style="color:blue"
                @click="videoPlay(row.videoURL)"
              ></i>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="visits" label="阅读数"> </el-table-column>
        <el-table-column prop="username" label="录入人"> </el-table-column>
        <el-table-column property="createTime" label="录入时间">
          <template v-slot="scope">{{
            scope.row.createTime | parseTime
          }}</template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{
              scope.row.state ? '已启用' : '已禁用'
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template v-slot="{ row }">
            <el-button @click="look(row)" type="text" size="small"
              >预览</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="btnDisable(row)"
              v-if="row.state === 0"
              >启用</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="btnDisable(row)"
              v-if="row.state === 1"
              >禁用</el-button
            >
            <el-button
              type="text"
              size="small"
              :disabled="row.state === 0 ? false : true"
              @click="change(row)"
              >修改</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="btnDelete(row)"
              :disabled="row.state === 0 ? false : true"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="form.page"
          :page-sizes="[1, 5, 10, 20, 50]"
          :page-size="10"
          layout="prev, pager, next,sizes, jumper"
          :total="20"
        >
        </el-pagination>
      </div>
    </el-card>
    <look ref="component"></look>
    <change ref="change" @getlist="getlist"></change>
    <div class="video-preview" v-show="showVideo">
      <div>
        <el-button
          class="el-icon-close close-video"
          round
          @click="closeVideo"
        ></el-button>
      </div>
      <video
        :src="videoUrl"
        style="width:800px;height:600px;margin-top:50px"
        autoplay
      ></video>
    </div>
  </div>
</template>

<script>
import { list, remove, changeState, detail } from '@/api/hmmm/articles.js'
import look from '@/module-hmmm/components/art-components/look.vue'
import Change from '../components/art-components/change.vue'
// import { timeAgo } from '@/components/xjb/date.js'
export default {
  components: { look, Change },
  name: 'Article',
  data () {
    return {
      showVideo: false,
      videoUrl: '',
      changeList: '',
      state: '',
      formInline: {
        user: '',
        region: ''
      },
      form: {
        page: 1,
        pagesize: 10,
        keyword: null,
        state: null
      },
      tableData: [],
      tableform: ''
    }
  },

  methods: {
    // 关闭视频
    closeVideo () {
      this.showVideo = false
    },
    // 播放视频
    videoPlay (videou) {
      this.showVideo = true
      this.videoUrl = videou
    },
    // 获取数据
    async getlist () {
      const res = await list(this.form)
      // console.log(res)
      this.tableData = res.data.items
    },
    // 清空搜索框内容
    onSubmit () {
      this.form.keyword = null
      this.form.state = null
      this.form.page = 1
      this.getlist()
    },
    // 搜素
    onSubmit_sou () {
      this.getlist()
    },
    // 显示每页数量
    handleSizeChange (val) {
      this.form.pagesize = val
      this.getlist()
    },
    // 显示当前的页数
    handleCurrentChange (val) {
      this.form.page = val
      this.getlist()
    },
    // 新增数据
    btnNew () {
      this.$refs.change.mode = 'add'
      this.$refs.change.dialogVisible = true
    },
    // 删除功能
    btnDelete (row) {
      this.$confirm('确定永久删除该数据？', '提示').then(async () => {
        await remove(row)
        this.$message.success('删除成功')
        this.getlist()
      })
    },
    // 禁用功能
    async btnDisable (row) {
      this.state = row.state
      if (this.state === 0) {
        this.state = 1
      } else {
        this.state = 0
      }
      await changeState({
        id: row.id,
        state: this.state
      })
      this.getlist()
    },
    // 预览弹窗
    async look (row) {
      this.$refs.component.dialogVisible = true
      const res = await detail({
        id: row.id
      })
      // console.log(res)
      this.$refs.component.row = res.data
    },
    // 修改功能
    async change (row) {
      this.$refs.change.mode = 'edit'
      this.$refs.change.show(row)
      // console.log(row, '1222')
      this.$refs.change.dialogVisible = true
      // const res = await detail({
      //   id: row.id
      // })
      // this.$refs.change.row = res.data
    }
  },

  created () {
    this.getlist()
  }
}
</script>

<style lang="scss" scoped>
.video-preview {
  position: absolute;
  z-index: 9999;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  .close-video {
    margin-top: 30px;
  }
}
.demo-form-inline {
  display: flex;
}

.state {
  font-size: 14px;
}
.button {
  width: 97px;
  height: 32px;
  font-size: 12px;
  margin-left: 400px;
}
.guanjian {
  font-size: 14px;
}
.input-size {
  height: 32px;
}
.button-btn {
  height: 32px;
  font-size: 12px;
}
.statistical {
  font-size: 13px;
  color: #909399 !important;
}
.el-icon-info {
  font-size: 16px;
  vertical-align: middle;
}
.block {
  display: flex;
  justify-content: flex-end;
}
</style>
